import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import Staff from '../pages/staff/staff.vue'
import B from '../components/B.vue'
import C from '../components/C.vue'
import NotFound from '../pages/NotFound.vue'
const staffDetail = () => import(/* webpackChunkName: "group-staffDetail" */ '../pages/staff/staffDetail.vue')
const Depart = () => import(/* webpackChunkName: "group-Depart" */ '../pages/Depart.vue')
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHistory('base'),
    routes: [
        { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
        {
            path: '/',
            component: Home,
            alias: '/home',
            redirect: { name: 'staff' },
            children: [
                {
                    path: 'staff',
                    name: 'staff',
                    meta: { requiresAuth: true, title: '人员' },
                    component: Staff,
                },
                {
                    path: 'staff/staffDetail/:id/:type',
                    name: 'staffDetail',
                    props: true,
                    meta: { requiresAuth: true, title: '人员详情' },
                    component: staffDetail,
                },
                {
                    path: 'depart',
                    name: 'depart',
                    meta: { requiresAuth: true, title: '部门' },
                    component: Depart,
                },

            ]
        },
        {
            path: '/about', components: {
                default: About,
                left: B,
                right: C
            },
            name: 'about'
        },
    ], // `routes: routes` 的缩写
})
export default router